<!DOCTYPE html>

<html lang="en">
	
	<head>

		<meta charset="utf-8" />

		<title>教职工管理</title>

		<!-- IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 设置 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 兼容国产浏览器的高速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

		<!-- BEGIN 全局样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link href="../../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css" />	
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<!--<link rel="stylesheet" type="text/css" href="../../lib/bootstrap-table/src/bootstrap-table.css"/>-->
		<!-- END 全局样式 -->
		<style type="text/css">
			.list-state.red{
			    display: inline-block;
			    width: 10px;
			    height: 10px;
			    background: red;
			    border-radius: 50%;
			    margin-left: 10px;
			}
			.list-state.black{
			    display: inline-block;
			    width: 10px;
			    height: 10px;
			    background: black;
			    border-radius: 50%;
			    margin-left: 10px;
			}
			.list-state{
			    display: inline-block;
			    width: 10px;
			    height: 10px;
			    /*background: deepskyblue;*/
			    border-radius: 50%;
			    margin-left: 10px;
			}
			
		</style>
	</head>

	

	<body class="">
		<div class="container-fluid">
			<div class="searchBox mt-10">
				<div class="form-group" style="width: 200px;margin: 0 auto;">				   
				    <div class="input-group">
				      <input type="text" class="form-control" id="keyword" placeholder="关键字">
				      <div class="input-group-addon">
				      	<a title="search" class="btn-search">
				      		<span class="glyphicon glyphicon-search"></span>
				      	</a>
				      </div>
				    </div>
			  	</div>
			</div>
			<div class="mb-10 mt-10 parentClear">
				<div class="btn-group lf">
					<a class="btn btn-primary btn-add"  title="add">
						<span class="glyphicon glyphicon-plus"></span>添加
					</a>	
					<!--<a class="btn btn-success btn-export"  title="export">
						<span class="glyphicon glyphicon-export"></span>导出
					</a>-->
				</div>
				<div class="rf pt-10">
					<span>总共</span>
					<b class="nTotal">0</b>
					<span>条</span>
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped table-vertical" id="table1">
				<thead>
					<tr class="text-c">
						<th width="50">编号</th>
						<th>姓名</th>
						<th>工号</th>
						<th>手机号</th>
						<th>邮箱</th>
						<th width="">操作</th>
					</tr>
					
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>
		
		
		
		
		<!--核心脚本sss-->
		<script src="../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../lib/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/localstorage-ie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/common/common.js" type="text/javascript" charset="utf-8"></script>

		<!--[if lt IE 9]>
		<script src="../../js/excanvas.min.js"></script>
		<script src="../../js/respond.min.js"></script>  
		<![endif]-->
		<!--核心脚本eee-->
		
		<script type="text/javascript">
			//函数调用区域====================================================================================
			//初始化分页东西
			$("#table1").paging({
				url: url_join("staff/list"),
				data: {
					limit:10,
					page:1,
					keyword:$("#keyword").val()
				},
				type: "post",
				eleTotal:$(".nTotal"),//总数dom节点
				callBack: function(data) {
					console.log(data);
					createTable(data,$("#table1"))
				}
			});
			
			//模糊搜索
			$(".btn-search").on("click",function(){
				$("#table1").paging({
					url: url_join("staff/list"),
					data: {
						limit:10,
						page:1,
						keyword:$("#keyword").val()
					},
					type: "post",
					eleTotal:$(".nTotal"),//总数dom节点
					callBack: function(data) {
						console.log(data);
						createTable(data,$("#table1"))
					}
				});
			});
			
			//添加用户
			$(".btn-add").on("click",function(){
				localStorage.setItem("optionType",$(this).attr("title"));
				layer.open({
					type: 2,
				    title: "添加",
				    area: ['100%', '100%'],
				    shade: 0.8,
				    closeBtn: 1,
				    shadeClose: true,
				    content: 'staffManage-option.html',
					end:function(){
						window.location.reload();
					}
				});
				
			});
			
			
			//编辑用户数据
			$("body").on("click",".btn-edit",function(){
				var nId = $(this).parents("tr").attr("data-id");
				localStorage.setItem("nId",nId);
				localStorage.setItem("optionType",$(this).attr("title"));
				layer.open({
					type: 2,
				    title: "编辑",
				    area: ['100%', '100%'],
				    shade: 0.8,
				    closeBtn: 1,
				    shadeClose: true,
				    content: 'staffManage-option.html',
					end:function(){
						window.location.reload();
					}
				})
			});
			
			//删除用户
			$("body").on("click",".btn-del",function(){
				var nId = $(this).parents("tr").attr("data-id");
				layer.confirm("确认删除？",function(){
					fnAjax.method_4(
						url_join("staff/delete"),
						{staff_id:nId},
						"post",
						function(data){
							layer.msg("操作成功",{time:1500},function(){
								window.location.reload();
							});
						}
					);
				});
			});
			
			//红名单
			$("body").on("click",".btn-to-red",function(){
				var nId = $(this).parents("tr").attr("data-id");
				layer.confirm("确认加入红名单？",function(){
					fnAjax.method_4(
						url_join("red-list/create"),
						{staff_id:nId},
						"post",
						function(data){
							layer.msg("操作成功",{time:1500},function(){
								window.location.reload();
							});
						}
					);
				});
			});
			
			//黑名单
			$("body").on("click",".btn-to-black",function(){
				var nId = $(this).parents("tr").attr("data-id");
				layer.confirm("确认加入黑名单？",function(){
					fnAjax.method_4(
						url_join("black-list/create"),
						{staff_id:nId},
						"post",
						function(data){
							layer.msg("操作成功",{time:1500},function(){
								window.location.reload();
							});
						}
					);
				});
			});
			
			//导出表格
			$(".btn-export").on("click",function(){
				window.location.href = url_join("staff/export");
			});
			
			//函数封装区域======================================================================================================
			/*
			创建表格 
			@param data 主要渲染数据
			@param containter 主要渲染数据的jq容器
			 * */
			function createTable(data,containter){
				containter.find("tbody tr").remove();
				$.each(data.items, function(i,v) {
					var sTr = '<tr class="text-center" data-id="'+ v.id +'">'+
								'<td class="td-num">'+ ((data.current-1)*data.limit+(i+1)) +'</td>'+
								'<td class="" style="width:100px;">'+ backListState(v.status,v.username) +'</td>'+
								'<td>'+ v.no +'</td>'+
								'<td class="">'+
									v.mobile + 
								'</td>'+
								'<td class="">'+
									v.email +
								'</td>'+								
								'<td class="td-option">'+
									'<a class="btn-edit ml-10 '+ $.forbiddenOption(v.no) +'" title="edit">'+
										'<span class="glyphicon glyphicon-edit"></span>编辑'+
									'</a>'+
									'<a class="btn-del ml-10 '+ $.forbiddenOption(v.no) +'" title="del">'+
										'<span class="glyphicon glyphicon-remove"></span>删除'+
									'</a>'+
								'</td>'+
							'</tr>';
					containter.append($(sTr));
				});
			}
			
			/**
			 返回红黑名单状态
			 * @param {number} nState 红黑名单状态
			 * @param {string} sName 教职工名称
			 * */
			function backListState(nState,sName){
				if(nState){
					if(nState == 1){
						return '<span class="textOverflow">'+ sName +'</span><span class="list-state red"></span>';
					}
					else if(nState == 2){
						return '<span class="textOverflow">'+ sName +'</span><span class="list-state black"></span>';
					}
					else if(nState == 0){
						return '<span class="textOverflow">'+ sName +'</span><span class="list-state"></span>';
					}
				}
			}
		</script>
	</body>

</html>